<template>
  <div class="admin-adoption-manage">
    <!-- 搜索栏 -->
    <el-card class="search-card">
      <div class="search-container">
        <div class="search-row">
          <div class="search-item">
            <label>品种：</label>
            <el-input 
              v-model="searchParams.breed" 
              placeholder="请输入品种" 
              clearable
              style="width: 200px;">
            </el-input>
          </div>
          
          <div class="search-item">
            <label>宠物类型：</label>
            <div class="filter-buttons">
              <el-button 
                :type="searchParams.petType === '' ? 'primary' : ''" 
                size="small"
                @click="searchParams.petType = ''">
                全部
              </el-button>
              <el-button 
                :type="searchParams.petType === '狗' ? 'primary' : ''" 
                size="small"
                @click="searchParams.petType = '狗'">
                狗
              </el-button>
              <el-button 
                :type="searchParams.petType === '猫' ? 'primary' : ''" 
                size="small"
                @click="searchParams.petType = '猫'">
                猫
              </el-button>
            </div>
          </div>
          
          <div class="search-item">
            <label>宠物性别：</label>
            <div class="filter-buttons">
              <el-button 
                :type="searchParams.petGender === '' ? 'primary' : ''" 
                size="small"
                @click="searchParams.petGender = ''">
                全部
              </el-button>
              <el-button 
                :type="searchParams.petGender === '公' ? 'primary' : ''" 
                size="small"
                @click="searchParams.petGender = '公'">
                公
              </el-button>
              <el-button 
                :type="searchParams.petGender === '母' ? 'primary' : ''" 
                size="small"
                @click="searchParams.petGender = '母'">
                母
              </el-button>
            </div>
          </div>
        </div>
        
        <div class="search-row">
          <div class="search-item">
            <label>状态：</label>
            <div class="filter-buttons">
              <el-button 
                :type="searchParams.status === '' ? 'primary' : ''" 
                size="small"
                @click="searchParams.status = ''">
                全部
              </el-button>
              <el-button 
                :type="searchParams.status === '寻找中' ? 'primary' : ''" 
                size="small"
                @click="searchParams.status = '寻找中'">
                寻找中
              </el-button>
              <el-button 
                :type="searchParams.status === '已结束' ? 'primary' : ''" 
                size="small"
                @click="searchParams.status = '已结束'">
                已结束
              </el-button>
            </div>
          </div>
          
          <div class="search-actions">
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
            <el-button type="warning" icon="el-icon-download" @click="handleExport">导出Excel</el-button>
          </div>
        </div>
      </div>
    </el-card>
    
    <!-- 领养帖子列表 -->
    <el-card class="table-card">
      <div class="table-header">
        <h3>宠物领养列表</h3>
        <span class="total-count">共 {{ total }} 条数据</span>
      </div>
      
      <el-table 
        :data="adoptionList" 
        v-loading="loading"
        stripe
        style="width: 100%">
        <el-table-column prop="id" label="帖子ID" min-width="100" align="center"></el-table-column>
        
        <el-table-column label="宠物照片" min-width="150" align="center">
          <template slot-scope="scope">
            <div class="image-stack" v-if="getImageList(scope.row.photos).length > 0" @click="handleViewImages(scope.row)">
              <img 
                v-for="(img, index) in getImageList(scope.row.photos).slice(0, 3)" 
                :key="index"
                :src="img" 
                :style="{ zIndex: 3 - index, left: index * 8 + 'px' }"
                class="stack-image">
              <span v-if="getImageList(scope.row.photos).length > 3" class="image-count">+{{ getImageList(scope.row.photos).length - 3 }}</span>
            </div>
            <span v-else style="color: #999;">暂无图片</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="title" label="标题" min-width="250">
          <template slot-scope="scope">
            <span style="font-weight: 600; color: #303133;">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="宠物信息" min-width="180">
          <template slot-scope="scope">
            <div>
              <el-tag type="success" size="small">{{ scope.row.petType }}</el-tag>
              <el-tag type="warning" size="small" style="margin-left: 5px;">{{ scope.row.petGender }}</el-tag>
              <div style="margin-top: 5px; color: #606266;">
                {{ scope.row.petName }} - {{ scope.row.breed }}
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="location" label="地理位置" min-width="150">
          <template slot-scope="scope">
            <span style="color: #606266;">
              <i class="el-icon-location"></i>
              {{ scope.row.location || '暂无' }}
            </span>
          </template>
        </el-table-column>
        
        <el-table-column label="发布者" min-width="180">
          <template slot-scope="scope">
            <div class="user-info">
              <img :src="scope.row.userAvatar || 'https://img1.baidu.com/it/u=1537776144,3012351076&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'" class="user-avatar">
              <div class="user-details">
                <div class="user-nickname">{{ scope.row.userNickname || '匿名用户' }}</div>
                <div class="user-phone" v-if="scope.row.userPhone">{{ scope.row.userPhone }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="status" label="状态" min-width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '寻找中' ? 'success' : 'info'" size="small">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="createTime" label="发布时间" min-width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        
        <el-table-column label="操作" min-width="250" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-view" @click="handleView(scope.row)">查看详情</el-button>
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" style="color: #f56c6c;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <el-pagination
        background
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px; text-align: right;">
      </el-pagination>
    </el-card>
    
    <!-- 查看详情弹窗 -->
    <el-dialog
      title="领养帖子详情"
      :visible.sync="detailDialogVisible"
      width="800px"
      top="5vh">
      <div v-if="currentPost" class="detail-container">
        <!-- 图片展示 -->
        <div class="detail-section" v-if="getImageList(currentPost.photos).length > 0">
          <h4>宠物照片</h4>
          <div class="image-gallery">
            <img 
              v-for="(img, index) in getImageList(currentPost.photos)" 
              :key="index"
              :src="img" 
              class="gallery-image"
              @click="handleViewImages(currentPost)">
          </div>
        </div>
        
        <!-- 基本信息 -->
        <div class="detail-section">
          <h4>基本信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="标题">{{ currentPost.title }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="currentPost.status === '寻找中' ? 'success' : 'info'" size="small">{{ currentPost.status }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="宠物名称">{{ currentPost.petName }}</el-descriptions-item>
            <el-descriptions-item label="宠物类型">{{ currentPost.petType }}</el-descriptions-item>
            <el-descriptions-item label="宠物性别">{{ currentPost.petGender }}</el-descriptions-item>
            <el-descriptions-item label="品种">{{ currentPost.breed }}</el-descriptions-item>
            <el-descriptions-item label="地理位置" :span="2">{{ currentPost.location || '暂无' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        
        <!-- 疫苗情况 -->
        <div class="detail-section" v-if="currentPost.vaccineStatus">
          <h4>疫苗情况</h4>
          <div class="detail-content">{{ currentPost.vaccineStatus }}</div>
        </div>
        
        <!-- 领养要求 -->
        <div class="detail-section" v-if="currentPost.adoptionRequirement">
          <h4>领养要求</h4>
          <div class="detail-content">{{ currentPost.adoptionRequirement }}</div>
        </div>
        
        <!-- 详细描述 -->
        <div class="detail-section" v-if="currentPost.description">
          <h4>详细描述</h4>
          <div class="detail-content">{{ currentPost.description }}</div>
        </div>
        
        <!-- 主人信息 -->
        <div class="detail-section" v-if="currentPost.ownerInfo">
          <h4>主人信息</h4>
          <div class="detail-content">{{ currentPost.ownerInfo }}</div>
        </div>
        
        <!-- 发布者信息 -->
        <div class="detail-section">
          <h4>发布者信息</h4>
          <div class="publisher-info">
            <img :src="currentPost.userAvatar || 'https://img1.baidu.com/it/u=1537776144,3012351076&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'" class="publisher-avatar">
            <div class="publisher-details">
              <div><strong>昵称：</strong>{{ currentPost.userNickname || '匿名用户' }}</div>
              <div v-if="currentPost.userPhone"><strong>手机：</strong>{{ currentPost.userPhone }}</div>
              <div v-if="currentPost.userEmail"><strong>邮箱：</strong>{{ currentPost.userEmail }}</div>
            </div>
          </div>
        </div>
        
        <!-- 时间信息 -->
        <div class="detail-section">
          <h4>时间信息</h4>
          <div class="detail-content">发布时间：{{ formatDate(currentPost.createTime) }}</div>
        </div>
      </div>
    </el-dialog>
    
    <!-- 图片浏览弹窗 -->
    <el-dialog
      title="图片浏览"
      :visible.sync="imageDialogVisible"
      width="900px"
      top="5vh"
      :close-on-click-modal="false">
      <div class="image-viewer">
        <div class="main-image-container">
          <el-button 
            icon="el-icon-arrow-left" 
            circle 
            class="nav-btn nav-btn-left"
            @click="prevImage"
            :disabled="currentImageIndex === 0">
          </el-button>
          
          <img :src="currentImageList[currentImageIndex]" class="main-view-image">
          
          <el-button 
            icon="el-icon-arrow-right" 
            circle 
            class="nav-btn nav-btn-right"
            @click="nextImage"
            :disabled="currentImageIndex === currentImageList.length - 1">
          </el-button>
        </div>
        
        <div class="image-indicator">
          {{ currentImageIndex + 1 }} / {{ currentImageList.length }}
        </div>
        
        <div class="thumbnail-container">
          <div 
            v-for="(img, index) in currentImageList" 
            :key="index"
            class="thumbnail-item"
            :class="{ active: currentImageIndex === index }"
            @click="currentImageIndex = index">
            <img :src="img">
          </div>
        </div>
      </div>
    </el-dialog>
    
    <!-- 编辑对话框 -->
    <el-dialog 
      title="编辑领养帖子" 
      :visible.sync="editDialogVisible" 
      width="800px"
      :close-on-click-modal="false">
      <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="120px">
        <el-form-item label="宠物照片" prop="photos">
          <div class="upload-container">
            <div class="image-list">
              <div 
                v-for="(img, index) in editForm.imageList" 
                :key="index" 
                class="image-item">
                <img :src="img" alt="宠物照片">
                <div class="image-overlay">
                  <i class="el-icon-zoom-in" @click="handlePreviewImage(index)"></i>
                  <i class="el-icon-delete" @click="handleRemoveImage(index)"></i>
                </div>
              </div>
              
              <el-upload
                v-if="editForm.imageList.length < 5"
                class="image-uploader"
                action=""
                :show-file-list="false"
                :before-upload="handleBeforeUpload"
                :http-request="handleUploadImage">
                <i class="el-icon-plus upload-icon"></i>
                <div class="upload-text">上传图片</div>
              </el-upload>
            </div>
            <div class="upload-tip">最多可上传5张图片，支持jpg、png格式，单张图片不超过2MB</div>
          </div>
        </el-form-item>
        
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        
        <el-form-item label="宠物名称" prop="petName">
          <el-input v-model="editForm.petName" placeholder="请输入宠物名称"></el-input>
        </el-form-item>
        
        <el-form-item label="宠物类型" prop="petType">
          <div class="filter-buttons">
            <el-button 
              :type="editForm.petType === '狗' ? 'primary' : ''" 
              size="small"
              @click="editForm.petType = '狗'">
              狗
            </el-button>
            <el-button 
              :type="editForm.petType === '猫' ? 'primary' : ''" 
              size="small"
              @click="editForm.petType = '猫'">
              猫
            </el-button>
          </div>
        </el-form-item>
        
        <el-form-item label="宠物性别" prop="petGender">
          <div class="filter-buttons">
            <el-button 
              :type="editForm.petGender === '公' ? 'primary' : ''" 
              size="small"
              @click="editForm.petGender = '公'">
              公
            </el-button>
            <el-button 
              :type="editForm.petGender === '母' ? 'primary' : ''" 
              size="small"
              @click="editForm.petGender = '母'">
              母
            </el-button>
          </div>
        </el-form-item>
        
        <el-form-item label="品种" prop="breed">
          <el-input v-model="editForm.breed" placeholder="请输入品种"></el-input>
        </el-form-item>
        
        <el-form-item label="地理位置" prop="location">
          <el-input v-model="editForm.location" placeholder="请输入地理位置"></el-input>
        </el-form-item>
        
        <el-form-item label="疫苗情况" prop="vaccineStatus">
          <el-input 
            v-model="editForm.vaccineStatus" 
            type="textarea"
            :rows="3"
            placeholder="请输入疫苗情况">
          </el-input>
        </el-form-item>
        
        <el-form-item label="领养要求" prop="adoptionRequirement">
          <el-input 
            v-model="editForm.adoptionRequirement" 
            type="textarea"
            :rows="3"
            placeholder="请输入领养要求">
          </el-input>
        </el-form-item>
        
        <el-form-item label="详细描述" prop="description">
          <el-input 
            v-model="editForm.description" 
            type="textarea"
            :rows="4"
            placeholder="请输入详细描述">
          </el-input>
        </el-form-item>
        
        <el-form-item label="主人信息" prop="ownerInfo">
          <el-input 
            v-model="editForm.ownerInfo" 
            type="textarea"
            :rows="3"
            placeholder="请输入主人信息">
          </el-input>
        </el-form-item>
        
        <el-form-item label="状态" prop="status">
          <div class="filter-buttons">
            <el-button 
              :type="editForm.status === '寻找中' ? 'primary' : ''" 
              size="small"
              @click="editForm.status = '寻找中'">
              寻找中
            </el-button>
            <el-button 
              :type="editForm.status === '已结束' ? 'primary' : ''" 
              size="small"
              @click="editForm.status = '已结束'">
              已结束
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitEdit" :loading="submitLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAdminAdoptionList, getAdminAdoptionDetail, deleteAdoptionPost, exportAdoption, adminUpdateAdoptionPost } from '@/api/adoption';
import { uploadFile } from '@/api/file';

export default {
  name: 'AdminAdoptionManage',
  data() {
    return {
      searchParams: {
        breed: '',
        petType: '',
        petGender: '',
        status: ''
      },
      adoptionList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      
      detailDialogVisible: false,
      currentPost: null,
      
      imageDialogVisible: false,
      currentImageList: [],
      currentImageIndex: 0,
      
      // 编辑相关
      editDialogVisible: false,
      submitLoading: false,
      editForm: {
        id: null,
        title: '',
        petName: '',
        petType: '狗',
        petGender: '公',
        breed: '',
        location: '',
        vaccineStatus: '',
        adoptionRequirement: '',
        description: '',
        ownerInfo: '',
        status: '寻找中',
        photos: '',
        imageList: []
      },
      editRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        petName: [
          { required: true, message: '请输入宠物名称', trigger: 'blur' }
        ],
        petType: [
          { required: true, message: '请选择宠物类型', trigger: 'change' }
        ],
        petGender: [
          { required: true, message: '请选择宠物性别', trigger: 'change' }
        ],
        breed: [
          { required: true, message: '请输入品种', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.loadAdoptionList();
  },
  methods: {
    // 加载领养帖子列表
    async loadAdoptionList() {
      this.loading = true;
      try {
        const params = {
          page: this.currentPage,
          size: this.pageSize
        };
        
        if (this.searchParams.breed) {
          params.breed = this.searchParams.breed;
        }
        if (this.searchParams.petType) {
          params.petType = this.searchParams.petType;
        }
        if (this.searchParams.petGender) {
          params.petGender = this.searchParams.petGender;
        }
        if (this.searchParams.status) {
          params.status = this.searchParams.status;
        }
        
        const response = await getAdminAdoptionList(params);
        if (response.data.success) {
          this.adoptionList = response.data.data.records || [];
          this.total = response.data.data.total || 0;
        } else {
          this.$notify({
            title: '失败',
            message: response.data.message || '加载列表失败',
            type: 'error',
            duration: 2000
          });
        }
      } catch (error) {
        this.$notify({
          title: '错误',
          message: '加载列表失败，请稍后重试',
          type: 'error',
          duration: 2000
        });
      } finally {
        this.loading = false;
      }
    },
    
    // 搜索
    handleSearch() {
      this.currentPage = 1;
      this.loadAdoptionList();
    },
    
    // 重置
    handleReset() {
      this.searchParams = {
        breed: '',
        petType: '',
        petGender: '',
        status: ''
      };
      this.currentPage = 1;
      this.loadAdoptionList();
    },
    
    // 翻页
    handlePageChange(page) {
      this.currentPage = page;
      this.loadAdoptionList();
    },
    
    // 每页数量变化
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.loadAdoptionList();
    },
    
    // 查看详情
    async handleView(row) {
      try {
        const response = await getAdminAdoptionDetail(row.id);
        if (response.data.success) {
          this.currentPost = response.data.data;
          this.detailDialogVisible = true;
        } else {
          this.$notify({
            title: '失败',
            message: response.data.message || '加载详情失败',
            type: 'error',
            duration: 2000
          });
        }
      } catch (error) {
        this.$notify({
          title: '错误',
          message: '加载详情失败，请稍后重试',
          type: 'error',
          duration: 2000
        });
      }
    },
    
    // 删除
    handleDelete(row) {
      this.$confirm('确定要删除这条领养帖子吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const response = await deleteAdoptionPost(row.id);
          if (response.data.success) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            });
            this.loadAdoptionList();
          } else {
            this.$notify({
              title: '失败',
              message: response.data.message || '删除失败',
              type: 'error',
              duration: 2000
            });
          }
        } catch (error) {
          this.$notify({
            title: '错误',
            message: '删除失败，请稍后重试',
            type: 'error',
            duration: 2000
          });
        }
      }).catch(() => {
        // 取消删除
      });
    },
    
    // 查看图片
    handleViewImages(row) {
      const images = this.getImageList(row.photos);
      if (images.length > 0) {
        this.currentImageList = images;
        this.currentImageIndex = 0;
        this.imageDialogVisible = true;
      }
    },
    
    // 上一张图片
    prevImage() {
      if (this.currentImageIndex > 0) {
        this.currentImageIndex--;
      }
    },
    
    // 下一张图片
    nextImage() {
      if (this.currentImageIndex < this.currentImageList.length - 1) {
        this.currentImageIndex++;
      }
    },
    
    // 获取图片列表
    getImageList(photos) {
      if (!photos) return [];
      return photos.split(',').filter(img => img.trim());
    },
    
    // 导出Excel
    handleExport() {
      const params = {};
      
      if (this.searchParams.breed) {
        params.breed = this.searchParams.breed;
      }
      if (this.searchParams.petType) {
        params.petType = this.searchParams.petType;
      }
      if (this.searchParams.petGender) {
        params.petGender = this.searchParams.petGender;
      }
      if (this.searchParams.status) {
        params.status = this.searchParams.status;
      }
      
      const exportUrl = exportAdoption(params);
      window.open(exportUrl, '_blank');
      
      this.$notify({
        title: '提示',
        message: '正在导出，请稍候...',
        type: 'info',
        duration: 2000
      });
    },
    
    // 编辑领养帖子
    async handleEdit(row) {
      try {
        const response = await getAdminAdoptionDetail(row.id);
        if (response.data.success) {
          const postData = response.data.data;
          this.editForm = {
            id: postData.id,
            title: postData.title,
            petName: postData.petName,
            petType: postData.petType,
            petGender: postData.petGender,
            breed: postData.breed,
            location: postData.location || '',
            vaccineStatus: postData.vaccineStatus || '',
            adoptionRequirement: postData.adoptionRequirement || '',
            description: postData.description || '',
            ownerInfo: postData.ownerInfo || '',
            status: postData.status,
            photos: postData.photos || '',
            imageList: this.getImageList(postData.photos)
          };
          this.editDialogVisible = true;
        }
      } catch (error) {
        this.$notify({
          title: '错误',
          message: '加载帖子详情失败，请稍后重试',
          type: 'error',
          duration: 2000
        });
      }
    },

    // 提交编辑
    handleSubmitEdit() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          this.submitLoading = true;
          try {
            const submitData = {
              ...this.editForm,
              photos: this.editForm.imageList.join(',')
            };
            delete submitData.imageList;
            
            const response = await adminUpdateAdoptionPost(submitData);
            if (response.data.success) {
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              });
              this.editDialogVisible = false;
              this.loadAdoptionList();
            } else {
              this.$notify({
                title: '错误',
                message: response.data.message || '更新失败',
                type: 'error',
                duration: 2000
              });
            }
          } catch (error) {
            this.$notify({
              title: '错误',
              message: '更新失败，请稍后重试',
              type: 'error',
              duration: 2000
            });
          } finally {
            this.submitLoading = false;
          }
        }
      });
    },

    // 上传前校验
    handleBeforeUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;
      
      if (!isImage) {
        this.$notify({
          title: '错误',
          message: '只能上传图片文件',
          type: 'error',
          duration: 2000
        });
        return false;
      }
      
      if (!isLt2M) {
        this.$notify({
          title: '错误',
          message: '图片大小不能超过2MB',
          type: 'error',
          duration: 2000
        });
        return false;
      }
      
      return true;
    },

    // 上传图片
    async handleUploadImage(params) {
      try {
        const response = await uploadFile(params.file);
        if (response.data.success) {
          const imageUrl = response.data.data;
          this.editForm.imageList.push(imageUrl);
          this.$notify({
            title: '成功',
            message: '图片上传成功',
            type: 'success',
            duration: 2000
          });
        } else {
          this.$notify({
            title: '错误',
            message: response.data.message || '图片上传失败',
            type: 'error',
            duration: 2000
          });
        }
      } catch (error) {
        this.$notify({
          title: '错误',
          message: '图片上传失败',
          type: 'error',
          duration: 2000
        });
      }
    },

    // 删除图片
    handleRemoveImage(index) {
      this.editForm.imageList.splice(index, 1);
    },

    // 预览图片（表单中）
    handlePreviewImage(index) {
      this.currentImageList = [...this.editForm.imageList];
      this.currentImageIndex = index;
      this.imageDialogVisible = true;
    },

    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  }
};
</script>

<style scoped>
.admin-adoption-manage {
  padding: 20px;
}

/* 搜索卡片 */
.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.search-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-item label {
  font-weight: 600;
  color: #606266;
  white-space: nowrap;
}

.filter-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.search-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

/* 表格卡片 */
.table-card {
  border-radius: 8px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e4e7ed;
}

.table-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
  font-weight: 600;
}

.total-count {
  color: #909399;
  font-size: 14px;
}

/* 层叠图片 */
.image-stack {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  cursor: pointer;
}

.stack-image {
  position: absolute;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 2px solid white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s;
}

.image-stack:hover .stack-image {
  transform: translateY(-5px);
}

.image-count {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 12px;
  z-index: 10;
}

/* 用户信息 */
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e4e7ed;
}

.user-details {
  flex: 1;
  min-width: 0;
}

.user-nickname {
  font-weight: 600;
  color: #303133;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-phone {
  font-size: 12px;
  color: #909399;
}

/* 详情弹窗 */
.detail-container {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 2px solid #e4e7ed;
}

.detail-content {
  padding: 10px;
  background: #f5f7fa;
  border-radius: 6px;
  line-height: 1.8;
  color: #606266;
  white-space: pre-wrap;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s;
  border: 2px solid #e4e7ed;
}

.gallery-image:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.publisher-info {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
}

.publisher-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
}

.publisher-details {
  flex: 1;
}

.publisher-details > div {
  margin-bottom: 8px;
  color: #606266;
}

.publisher-details > div:last-child {
  margin-bottom: 0;
}

/* 图片浏览弹窗 */
.image-viewer {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.main-image-container {
  position: relative;
  width: 100%;
  height: 500px;
  background: #f5f7fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-view-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: white;
  border: 1px solid #dcdfe6;
}

.nav-btn-left {
  left: 10px;
}

.nav-btn-right {
  right: 10px;
}

.image-indicator {
  text-align: center;
  font-size: 14px;
  color: #606266;
  font-weight: 600;
}

.thumbnail-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.thumbnail-item {
  width: 80px;
  height: 80px;
  border: 2px solid #dcdfe6;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.thumbnail-item:hover {
  border-color: #409eff;
  transform: scale(1.05);
}

.thumbnail-item.active {
  border-color: #409eff;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.5);
}

.thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 编辑对话框样式 */
.upload-container {
  width: 100%;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.image-item {
  position: relative;
  width: 120px;
  height: 120px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-item:hover .image-overlay {
  opacity: 1;
}

.image-overlay i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.image-overlay i:hover {
  transform: scale(1.2);
}

.image-uploader {
  width: 120px;
  height: 120px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: border-color 0.3s;
}

.image-uploader:hover {
  border-color: #409eff;
}

.upload-icon {
  font-size: 28px;
  color: #8c939d;
}

.upload-text {
  margin-top: 8px;
  color: #8c939d;
  font-size: 12px;
}

.upload-tip {
  color: #999;
  font-size: 12px;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-actions {
    margin-left: 0;
    justify-content: flex-start;
  }
}
</style>

